<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/cookie.js"></script>
</head>

<body>
  <button class="set">创建(存储)</button>
  <button class="get">获取</button>
</body>
<script>


  //  cookie需要注意的问题
  // 1. cookie 不能跨网站 (京东存储的cookie 只能在京东使用)
  // 2. cookie 不能跨浏览器 (谷歌的cookie  QQ浏览器也不能使用)
  // 3. 有些浏览器在使用中文时，会出现乱码   => 中文的编码和解码 
  // 4. cookie的键值 默认都是字符串类型 , 如果存储非字符串(隐式转化为字符串) 
  //    想在cookie中存储复杂类型的数据 (数组和对象)
  // 5. cookie 依赖于服务器环境 ，即设置和获取cookie时，要用 http 访问网页。
  //  (学习时使用带有服务器环境的编辑器  live server,hbuildX,webstorm)



  var setBtn = document.querySelector(".set");
  var getBtn = document.querySelector(".get");

  // setBtn.onclick = function(){
  //     var arr = [2,8,4,6,5,7,9,3,1];   
  //     var obj = {name:"zhangSan",age:18};  
  //     setCookie("arr",arr,7);
  //     setCookie("obj",obj,7);
  // }


  // getBtn.onclick = function(){
  //     console.log(getCookie("arr"));
  //     console.log(getCookie("obj"));
  // }


  setBtn.onclick = function () {
    var arr = [2, 8, 4, 6, 5, 7, 9, 3, 1];
    var obj = { name: "zhangSan", age: 18 };
    setCookie("arr", JSON.stringify(arr), 7);
    setCookie("obj", JSON.stringify(obj), 7);
  }


  getBtn.onclick = function () {
    var enArr = getCookie("arr");
    var enObj = getCookie("obj");

    var arr = JSON.parse(enArr);
    var obj = JSON.parse(enObj);
    console.log(arr, obj);
  }
</script>

</html>